<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm($event, validateForm.value)">
    <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="email"> 技术支持邮箱 </nz-form-label>
        <nz-form-control [nzSm]="20" [nzXs]="24">
            <nz-switch formControlName="emailSwitch"></nz-switch>
            <input nz-input formControlName="email" class="input" />
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="officialWebsite"> 企业官网地址 </nz-form-label>
        <nz-form-control [nzSm]="20" [nzXs]="24">
            <nz-switch formControlName="officialWebsiteSwitch"></nz-switch>
            <input nz-input formControlName="officialWebsite" class="input" />
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="copyrightNotice"> 版权申明 </nz-form-label>
        <nz-form-control [nzSm]="20" [nzXs]="24">
            <nz-switch formControlName="copyrightNoticeSwitch"></nz-switch>
            <input nz-input formControlName="copyrightNotice" class="input" />
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzXs]="24" [nzSm]="4" nzFor="support">技术支持电话</nz-form-label>
        <nz-form-control [nzXs]="24" [nzSm]="20">
            <nz-switch formControlName="supportSwitch" class="switch"></nz-switch> <br />
            <div nz-row>
                <div nz-col nzSpan="6">联系人</div>
                <div nz-col nzSpan="6">联系方式</div>
                <div nz-col nzSpan="6">服务时间</div>
            </div>
            <div formArrayName="support" *ngFor="let field of support.controls; let i = index" style="margin-top: 8px;">
                <div [formGroupName]="i" nz-row>
                    <div nz-col nzSpan="6">
                        <input nz-input formControlName="contact" class="dynamicInput" />
                    </div>
                    <div nz-col nzSpan="6">
                        <input nz-input formControlName="phone" class="dynamicInput" />
                    </div>
                    <div nz-col nzSpan="6">
                        <input nz-input formControlName="time" class="dynamicInput" />
                    </div>
                    <div nz-col nzSpan="6">
                        <button class="marginRight" nz-button (click)="toggleEditSave($event,i)">{{
                            field.get('isEditing').value ? '保存' : '编辑' }}</button>
                        <button nz-button (click)="remove($event,i)">删除</button>
                    </div>
                </div>
            </div>
            <div class="add">
                <button nzType="dashed" style="width: 60%" nz-button (click)="addNewSupport($event)">新增</button>
            </div>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="onlineService"> 在线客服 </nz-form-label>
        <nz-form-control [nzSm]="20" [nzXs]="24">
            <nz-switch formControlName="onlineServiceSwitch" class="switch"></nz-switch> <br />
            <div class="supportLayout">
                <div class="supportLayoutImg">
                    <img [src]="onlineServiceImg" alt="在线客服二维码" />
                </div>
                <div class="content">
                    <span>
                        支持：仅支持png格式，不超过500KB <br />
                        建议尺寸：80 * 80（像素）
                    </span><br>

                    <input type="file" (change)="getUpload(onlineServiceInput.files, 'onlineServiceImg')" accept=".png"
                        style="display: none" #onlineServiceInput />
                    <button nz-button nzType="primary" type="button" (click)="onlineServiceInput.click()">替换</button>
                </div>
            </div>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="userDocument"> 用户文档 </nz-form-label>
        <nz-form-control [nzSm]="20" [nzXs]="24">
            <nz-switch formControlName="userDocumentSwitch" class="switch"></nz-switch> <br />
            <div class="supportLayout">
                <div class="supportLayoutImg">
                    <img [src]="userDocumentImg" alt="用户文档二维码" />
                </div>
                <div class="content">
                    <span>
                        支持：仅支持png格式，不超过500KB <br />
                        建议尺寸：80 * 80（像素）
                    </span><br>
                    <input type="file" (change)="getUpload(userDocumentInput.files, 'userDocumentImg')" accept=".png"
                        style="display: none" #userDocumentInput />
                    <button nz-button nzType="primary" type="button" (click)="userDocumentInput.click()">替换</button>
                </div>
            </div>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="userLicense"> 用户许可协议 </nz-form-label>
        <nz-form-control [nzSm]="20" [nzXs]="24">
            <nz-switch formControlName="userLicenseSwitch" class="switch"></nz-switch> <br />
            <textarea class="textarea" formControlName="userLicense" nz-input rows="5" placeholder=""></textarea>
        </nz-form-control>
    </nz-form-item>


    <nz-form-item>
        <nz-form-control [nzOffset]="2" [nzSpan]="12">
            <div class="btns">
                <button nz-button nzType="primary" [disabled]="!validateForm.valid">保存配置</button>
                <button nz-button nzType="default" class="buttonMargin" nz-popconfirm nzTitle="是否需要恢复配置?"
                    (nzOnConfirm)="resetForm()">恢复配置</button>
            </div>
        </nz-form-control>
    </nz-form-item>
</form>
